<template>
    <div class="box1">
        <header class="header1">
            <div class="dz">
                <svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31" class="index-okfdP_0">
                    <path fill="#FFF" fill-rule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
                </svg>
                <span>北京西站</span>
                <svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" class="index-2iXz3_0">
                    <path fill="#FFF" fill-rule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
                </svg>
            </div>
            <div class="sousuo">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path fill-opacity=".38" d="M14.778 13.732a.739.739 0 1 1-1.056 1.036l-2.515-2.565a.864.864 0 0 1-.01-1.206 4.894 4.894 0 0 0 1.357-3.651c-.126-2.492-2.156-4.52-4.648-4.647a4.911 4.911 0 0 0-5.16 5.163c.126 2.475 2.13 4.496 4.605 4.642.451.026.896-.008 1.326-.1a.739.739 0 0 1 .308 1.446c-.56.12-1.137.164-1.72.13-3.227-.19-5.83-2.815-5.995-6.042a6.39 6.39 0 0 1 6.71-6.715c3.25.165 5.884 2.8 6.05 6.048a6.37 6.37 0 0 1-1.374 4.3l2.12 2.161z"></path>
                </svg>
                <span>搜索饿了么商家、商品名称</span>
            </div>
        </header>
        <nav class="tap">
            <swiper :options="swiperOption" ref="mySwiper">

                <swiper-slide>
                    <div class="fd_slide fd_slide1">
                        <div class="shang">
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>美食</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/e/89/185f7259ebda19e16123884a60ef2jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>晚餐</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/c/3c/0184f5b3fa72f295fc01864734218jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>商超便利</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>果蔬生鲜</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/7/0a/af108e256ebc9f02db599592ae655jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>医药健康</span>
                                </dd>
                            </dl>
                        </div>
                        <div class="shang">
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/a/7b/b02bd836411c016935d258b300cfejpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>打牌5折</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>浪漫鲜花</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/e/c7/b7ba9547aa700bd20d0420e1794a8jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>麻辣烫</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>地方菜系</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="//fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                                </dt>
                                <dd>
                                    <span>披萨意面</span>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </nav>
        <div class="qianggou">
            <div class="qianggou1">
                <h3>品质套餐</h3>
                <h4>搭配齐全吃得好</h4>
                <h5>立即抢购></h5>
                <img src="//fuss10.elemecdn.com/d/d4/16ff085900d62b8d60fa7e9c6b65dpng.png?imageMogr/format/webp/thumbnail/!240x160r/gravity/Center/crop/240x160/">
            </div>
            <div class="qianggou2">
                <h3>限量抢购</h3>
                <h4>超值美味9.9元起</h4>
                <h5>1367人
                    <span>正在疯抢></span>></h5>
                <img src="//fuss10.elemecdn.com/b/e1/0fa0ed514c093a7138b0b9a50d61fpng.png?imageMogr/format/webp/thumbnail/!240x160r/gravity/Center/crop/240x160/">
            </div>
        </div>
        <div class="tuijian">
            <h3>—&nbsp;&nbsp;推荐商家&nbsp;&nbsp;—</h3>
            <div class="xuanze">
                <ul>
                    <li>
                        <p>综合排序

                        </p>
                    </li>
                    <li>
                        <p>好评优先</p>
                    </li>
                    <li>
                        <p>距离最近</p>
                    </li>
                    <li>
                        <p>筛选

                        </p>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
        swiper,
        swiperSlide
    },
    data() {
        return {
            swiperOption: {
                notNextTick: true,
                pagination: '.swiper-pagination',
                slidesPerView: 'auto',
                centeredSlides: true,
                paginationClickable: true,
                spaceBetween: 30,
                onSlideChangeEnd: swiper => {
                    this.page = swiper.realIndex + 1;
                    this.index = swiper.realIndex;
                }
            }
        }
    },
    //定义sweiper对象
    computed: {

        swiper() {
            return this.$refs.mySwiper.swiper;
        }
    },
    mounted() {
        this.swiper.slideTo(0, 0, false);
    }

}

</script>

<style>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.box1 {
    position: fixed;
    top: 0;
    left: 0;
}

.header1 {
    height: 50%;
    background-color: #0085ff;
}

.tap {
    width: 100%;
}

.dz {
    width: 50%;
    padding-top: 1rem;
}

.dz svg {
    display: inline-block;
    width: 8%;
    height: 8%;
    margin-left: 15%;
}

#svg2 {
    display: inline-block;
    width: 5%;
    height: 5%;
    margin-left: 0%;
}

.dz span {
    color: #fff;
    font-weight: bolder;
    font-size: 1.3rem;
}

.sousuo svg {
    width: 10%;
    height: 50%;
    margin-left: 11%;
    padding-top: 3%;
    display: inline-block;
}

.sousuo {
    width: 90%;
    height: 1.8rem;
    background-color: #fff;
    margin: 3%;
    padding-bottom: 2%;
}

.sousuo span {
    width: 8%;
    height: 8%;
    padding-top: 3%;
    padding-bottom: 3%;
}

.shang {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.tap {
    margin-left: 2%;
    margin-right: 2%;
}

.shang dl dt img {
    width: 70%;
    height: 70%;
}

.shang dl dd span {
    display: inline-block;
    font-size: .8rem;
    text-align: center;
}

.qianggou {
    width: 90%;
    margin-bottom: 4%;
    margin-left: 4%;
    margin-top: 5%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.qianggou1 {
    width: 49%;
    background-color: #EAE7E7;
    position: relative;
}

.qianggou1 h3 {
    margin-left: 8%;
    margin-top: 3%;
}

.qianggou1 h4 {
    margin-left: 8%;
    margin-top: 1%;
    font-weight: normal;
    color: #A3A7AB;
}

.qianggou1 h5 {
    margin-left: 8%;
    margin-top: 2%;
    color: #E28415;
}

.qianggou1 img {
    width: 60%;
    height: 60%;
    position: absolute;
    right: 0;
    bottom: 0;
}

.qianggou2 {
    width: 50%;
    background-color: #EAE7E7;
    position: relative;
}

.qianggou2 h3 {
    margin-left: 8%;
    margin-top: 3%;
    color: #F41C1C;
}

.qianggou2 h4 {
    margin-left: 8%;
    margin-top: 1%;
    font-weight: normal;
    color: #A3A7AB;
}

.qianggou2 h5 {
    margin-left: 8%;
    margin-top: 2%;
    color: #F41C1C;
}

.qianggou2 h5 span {
    color: #160101;
}

.qianggou2 img {
    width: 60%;
    height: 50%;
    margin-left: 35%;
}

.tuijian h3 {
    font-weight: normal;
    margin-left: 30%;
    margin-bottom: 5%;
}

.xuanze ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.fd_slide {
    margin-left: 10px;
}

.fd_slide dl {
    text-align: center;
    margin-right: 2px;
}

.box {
    width: 692px;
}
</style>




